<template>

    <!--商品详情 -->
    <div class="edit_container">
    <quill-editor
      class="editor"
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
       <!-- 从数据库读取展示 -->
    <div v-html="str" class="ql-editor">
      {{ str }}
    </div>
    </div>

</template>

<script>
const {getTopicInfo} = require("../../request/httpApi")
export default {
  // props:['contents'],
  data() {
    return {
      content: '',
      editorOption: {},
      str: "",
    };
  },
  methods: {
  
    // 失去焦点
    onEditorBlur() {}, // 获得焦点
    onEditorFocus(editor) {}, // 开始
    //子传父  把富文本的数据传到父组件去
    onEditorChange(editor) {
      this.$emit('fn',editor.html)
    },
    onEditorReady(editor) {
    }, // 值发生变化// 准备编辑器
    escapeStringHTML(str) {
      str = str.replace(/&lt;/g, "<");
      str = str.replace(/&gt;/g, ">");
      return str;
    },
  },
  computed: {
    editor(editor) {
      return this.$refs.myQuillEditor.quill;
    },
    
  },
  created(){
    getTopicInfo({
      id: this.$route.params.tid,
    }).then( res => {
      // console.log(res);
      let {content} = res.data
      this.content = content
    })
  },
   mounted() {
    let content = ""; // 请求后台返回的内容字符串
    this.str = this.escapeStringHTML(content);
  },

      editorOption: {
        modules: {
          ImageExtend: {
            loading: true,
            name: "good_pic",
            size: 0.02,
            action: "http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic",
            response: (res) => {
              // return res.data.fileUrl;
              console.log(res.data.fileUrl);
            },
            headers: (xhr, formData) => {
              // xhr.setRequestHeader(
              //  "X-Nideshop-Token",
              //  localStorage.getItem("token")
              // );
            }, // 可选参数 设置请求头部
            sizeError: () => {
              return this.$message.error("图片超过50kb");
            }, // 图片超过大小的回调
          },
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
              ["blockquote", "code-block"], //引用，代码块
              [{ header: 1 }, { header: 2 }], // 几级标题
              [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
              [{ script: "sub" }, { script: "super" }], // 下角标，上角标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文字输入方向
              [{ size: ["small", false, "large", "huge"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 颜色选择
              [{ font: [] }], // 字体
              [{ align: [] }], // 居中
              ["link", "image"],
              ["clean"],
            ],
            handlers: {
              image: function () {
                QuillWatch.emit(this.quill.id);
              },
            },
          },
        },
      },


};
</script>
 
<style lang = "less" scoped>

.quill-editor {
  width: 1610px;
  height: 640px;
  margin-bottom: 20px;
}
</style>